import React from 'react'
import { HomeOutlined,AntDesignOutlined } from '@ant-design/icons';
import { Table,Breadcrumb,Select,Input,Result} from 'antd';
import {Link} from 'react-router-dom';
import http from '../../../service/http';
import { GetUserName } from '../../../common/auth';
export default function PerMgr() {
  const [userList,setUserList]=React.useState([])
  const [searchType,setSearchType]=React.useState('name')
  const [per,setPer]=React.useState(-1)
  React.useEffect(()=>{
    http.userList().then((res)=>{
      if(res.code!==200)return
      setUserList(res.data.records)
    })
    http.getUser({username:GetUserName()}).then((res)=>{
      if(res.code!==200)return
      setPer(res.data.per)
    })
  },[])
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      ellipsis:true,
      align:'center'
    },
    {
      title: '账号',
      dataIndex: 'username',
      ellipsis:true,
      align:'center',
    },
    {
      title: '头像',
      ellipsis:true,
      dataIndex: 'img',
      align:'center',
      render:(src,row)=><img src={src} alt='' style={{width:'38px',height:'38px',borderRadius:'50%'}}/>
    },
    {
      title:'设置权限',
      dataIndex:'per',
      ellipsis:true,
      align:'center',
      render:(per,row)=>{
        return(<div>
          <Select defaultValue={per} disabled={row.username===GetUserName()?true:false} style={{ width: '100px' ,marginLeft:'15px',borderRight:'none'}} onChange={()=>{http.userPer({username:row.username})}}>
            <Select.Option value={0}>管理员</Select.Option>
            <Select.Option value={1}>普通用户</Select.Option>
          </Select>
        </div>)
      }
    }
  ];
  return (
    per===-1?<div>
    </div>:per===1?
    <div>
      <Result
        status="403"
        title="403"
        subTitle="Sorry,你没有访问此页面的权限."
      />
    </div>
    :
    <div style={{padding:'15px'}}>
      <Breadcrumb>
        <Breadcrumb.Item>
          <HomeOutlined />
          <Link to='/home'>首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <AntDesignOutlined />
          <Link to='/home/per_mgr2'>权限管理</Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      <hr/>
      <Select defaultValue="name" style={{ width: '100px' ,marginBottom:'20px',borderRight:'none'}} onChange={(value)=>{setSearchType(value)}}>
        <Select.Option value="name">名字</Select.Option>
        <Select.Option value="username">用户名</Select.Option>
      </Select>
      <Input.Search
        placeholder="请输入"
        enterButton
        size="middle"
        onSearch={(value)=>{
          http.userList({[searchType]:value}).then((res)=>{
            setUserList(res.data.records)
          })
        }}
        style={{width:'300px'}}
      />
      <Table  
        columns={columns} 
        dataSource={userList}
        rowKey="username"
        pagination={
          {
            pageSize:4,
            total:userList.total,
            onChange:(pageNum,pageSize)=>{
              http.userList({pageNum:pageNum,pageSize:pageSize}).then((res)=>{
                setUserList(res.data.records)
              })
            }
          }
        }
      />
    </div>
  )
}
